<template>
  <div class="main">
    <HeaderNav v-if="showHeader" />
    <router-view class="content"></router-view>
    <!--悬浮菜单-->
    <hand-menu></hand-menu>
    <!-- 圣诞节转盘 -->
    <rotary-table></rotary-table>
    <main-footer v-if="showFooter"></main-footer>
  </div>
</template>

<script>
import HeaderNav from './commponents/HeaderNav.vue'
import MainFooter from "@/views/main/commponents/main-footer";
import HandMenu from "@/views/main/commponents/hand-menu";
import RotaryTable from "@/views/main/commponents/rotary-activity.vue";
export default {
  name: "index",
  components: { HandMenu, MainFooter, HeaderNav, RotaryTable },
  data() {
    return {
      showFooter: true,
      showHeader: true
    }
  },
  watch: {
    '$route'(to) {
      this.onShowFooter();
      this.onShowHeader()
    }
  },
  created() {

  },
  mounted() {
    this.onShowFooter();
    this.onShowHeader()
  },
  methods: {
    onShowFooter() {
      let arr = ['login', 'register', 'forgot', 'loginToken'];
      let name = arr.filter((item) => {
        return item == this.$route.name;
      });
      if (name.length > 0) {
        this.showFooter = false;
      } else {
        this.showFooter = true;
      }
    },
    onShowHeader() {
      let arr = ['loginToken'];
      let name = arr.filter((item) => {
        return item == this.$route.name;
      });
      if (name.length > 0) {
        this.showHeader = false;
      } else {
        this.showHeader = true;
      }
    }
  }
}
</script>

<style scoped lang="less">
.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .content {
    flex: 1;
    // background: #F9FAFF;
  }
}
</style>